<%@ page language="java" import="java.util.*" pageEncoding="GB18030"
	import="Reservation.*,Application.Dao.*,java.text.SimpleDateFormat"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%
	List<Integer> tables=new ArrayList<Integer>();
	if(request.getParameter("date")==null||request.getParameter("date").equals("")){
		SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		String day = formatter.format(new Date());
		tables=ReservationDAO.getCurrentOccupiedTableIndex(day);
	}
	else
	{
		String date=request.getParameter("date");
		String fromTime = date+' '+request.getParameter("fromTime");
		String toTime =  date+' '+request.getParameter("toTime");
		/* System.out.println(fromTime);
		SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
		Date from = formatter.parse(fromTime);
		Date to = formatter.parse(toTime); 
		System.out.println(fromTime);*/
		tables=ReservationDAO.getOccupiedTableIndex(fromTime,toTime);
	}
	
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link href="css/general.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="css/popup.css" type="text/css"	media="screen" />
<script src="js/popup.js" type="text/javascript"></script>
<script src="js/datepicker.js" type="text/javascript"></script>
<script src="js/table.js" type="text/javascript"></script>
<script src="js/loopedslider.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
		$(function() {
			$('#slider').loopedSlider({
				autoStart : 2500,
				restart : 5000
			});

		});
</script>
</head>
<body>
	<div id="popupContact">
		<a id="popupContactClose">x</a>
		<iframe id="table_frame"  name="iframe" width="850px" height="700px"
			frameborder="0" scroll="auto"> </iframe>
	</div>
	<div id="backgroundPopup"></div>
	
	<div id="topbanner">

		<h1 id="sitename">
			Welcome To K&G Restaurant<span>Name: <%
			//currentUser.getFirstName() + " "+ currentUser.getLastName()
		%> </span>
		</h1>
	</div>
	<div id="wrap">
		<div id="header">
			<div id="slider">
				<div class="container">
					<ul class="slides">
						<li><div class="thumbholder">
								<img src="images/slider3.jpg" width="625" height="254"
									alt="First Image" />
							</div>
							<div class="txtholder">
								<h2>Slide Title</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua.</p>
							</div></li>

						<li><div class="thumbholder">
								<img src="images/gourmetfood003.jpg" width="625" height="254"
									alt="First Image" />
							</div>
							<div class="txtholder">
								<h2>Slide Title</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua.</p>
							</div></li>

						<li><div class="thumbholder">
								<img src="images/gourmetfood002.jpg" width="625" height="254"
									alt="First Image" />
							</div>
							<div class="txtholder">
								<h2>Slide Title</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua.</p>
							</div></li>

						<li><div class="thumbholder">
								<img src="images/slider4.jpg" width="625" height="254"
									alt="First Image" />
							</div>
							<div class="txtholder">
								<h2>Slide Title</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
									sed do eiusmod tempor incididunt ut labore et dolore magna
									aliqua.</p>
							</div></li>

					</ul>
				</div>
				<ul class="pagination">
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
				</ul>
			</div>
		</div>



		<div id="menu">
			<ul id="menu_bar">
				<li><a class="link" href="ViewTableConditions.jsp">Home</a>
				</li>
				<li><a href="EditMenu.jsp">Edit Menu</a>
				</li>
				<li><a href="#">Order Online</a>
				</li>
				<li><a href="#">Make Reservation</a>
				</li>
				<li><a href="ListReviews.jsp" target="parent">Manage Reviews</a></li>
				<li><a href="#">Contact Us</a>
				</li>
			</ul>
			
		</div>




		<div class="clear"></div>
	</div>
		
	
	<div id="maincontent" class="center">
	
		<h2>Welcome To Our Restaurant</h2>

			<div id=timeSelector align="center">
				<form id="ViewTableCondition" action="ViewTableConditions.jsp">
					<table width="294">
						<tr>
							<td width="208"><p>
									Date: <input type="text" name="date" id="datepicker"
										value="${param.date}" />
								</p></td>
							<td width="74"><input type="image" value="submitname"
								src="images/refreshButton.png" width="50" height="50" border="0"
								alt="SUBMIT!" name="image"></td>
						</tr>
						<tr>
							<td><p align="left">
									From: <select name="fromTime" id="fromTime">
										<option value="10:00:00" ${param.fromTime=='10:00:00' ? 'selected' : ''}>10:00</option>
										<option value="11:00:00" ${param.fromTime=='11:00:00' ? 'selected' : ''}>11:00</option>
										<option value="12:00:00" ${param.fromTime=='12:00:00' ? 'selected' : ''}>12:00</option>
										<option value="13:00:00" ${param.fromTime=='13:00:00' ? 'selected' : ''}>13:00</option>
										<option value="14:00:00" ${param.fromTime=='14:00:00' ? 'selected' : ''}>14:00</option>
										<option value="15:00:00" ${param.fromTime=='15:00:00' ? 'selected' : ''}>15:00</option>
										<option value="16:00:00" ${param.fromTime=='16:00:00' ? 'selected' : ''}>16:00</option>
										<option value="17:00:00" ${param.fromTime=='17:00:00' ? 'selected' : ''}>17:00</option>
										<option value="18:00:00" ${param.fromTime=='18:00:00' ? 'selected' : ''}>18:00</option>
										<option value="19:00:00" ${param.fromTime=='19:00:00' ? 'selected' : ''}>19:00</option>
										<option value="20:00:00" ${param.fromTime=='20:00:00' ? 'selected' : ''}>20:00</option>
										<option value="21:00:00" ${param.fromTime=='21:00:00' ? 'selected' : ''}>21:00</option>
										<option value="22:00:00" ${param.fromTime=='22:00:00' ? 'selected' : ''}>22:00</option>
									</select> To: <select name="toTime" id="toTime"
										onblur="testStartEndTime()">
										<option value="10:00:00" ${param.toTime=='10:00:00' ? 'selected' : ''}>10:00</option>
										<option value="11:00:00" ${param.toTime=='11:00:00' ? 'selected' : ''}>11:00</option>
										<option value="12:00:00" ${param.toTime=='12:00:00' ? 'selected' : ''}>12:00</option>
										<option value="13:00:00" ${param.toTime=='13:00:00' ? 'selected' : ''}>13:00</option>
										<option value="14:00:00" ${param.toTime=='14:00:00' ? 'selected' : ''}>14:00</option>
										<option value="15:00:00" ${param.toTime=='15:00:00' ? 'selected' : ''}>15:00</option>
										<option value="16:00:00" ${param.toTime=='16:00:00' ? 'selected' : ''}>16:00</option>
										<option value="17:00:00" ${param.toTime=='17:00:00' ? 'selected' : ''}>17:00</option>
										<option value="18:00:00" ${param.toTime=='18:00:00' ? 'selected' : ''}>18:00</option>
										<option value="19:00:00" ${param.toTime=='19:00:00' ? 'selected' : ''}>19:00</option>
										<option value="20:00:00" ${param.toTime=='20:00:00' ? 'selected' : ''}>20:00</option>
										<option value="21:00:00" ${param.toTime=='21:00:00' ? 'selected' : ''}>21:00</option>
										<option value="22:00:00" ${param.toTime=='22:00:00' ? 'selected' : ''}>22:00</option>
									</select>
								</p></td>
							<td>&nbsp;</td>
						</tr>
					</table>
				</form>
				</br>

			</div>
			<%
				String[] names = new String[16];
				//set default images
				for (int i = 0; i <= 15; i++) {
					names[i] = i + "A.png";
				}
				for (int i = 1; i <= 15; i++) {
					if (!tables.contains(i))
						names[i] = i + "A.png";
					else
						names[i] = i + "B.png";
				}
			%>
			<div id="layoutContainer" align="center">
				<table width="200" background="images/LayoutBg.png">
					<tr>
						<td><img class="table_image" id="1"
							src='images/<%=names[1]%>' width="123" height="123" />
						</td>
						<td><img class="table_image" id="2"
							src='images/<%=names[2]%>' width="123" height="123" /></td>
						<td><img class="table_image" id="3"
							src='images/<%=names[3]%>' width="123" height="123" /></td>

						<td><img class="table_image" id="4"
							src='images/<%=names[4]%>' width="123" height="123" /></td>
						<td><img class="table_image" id="5"
							src='images/<%=names[5]%>' width="123" height="123" /></td>
					</tr>
					<tr>
						<td height="220" rowspan="2"><img class="table_image" id="6"
							src='images/<%=names[6]%>' width="123" height="123" /></td>
						<td height="108"><img class="table_image" id="7"
							src='images/<%=names[7]%>' width="123" height="123" />
						</td>
						<td><img class="table_image" id="8"
							src='images/<%=names[8]%>' width="123" height="123" /></td>
						<td><img class="table_image" id="9"
							src='images/<%=names[9]%>' width="123" height="123" /></td>
						<td><img class="table_image" id="10"
							src='images/<%=names[10]%>' width="123" height="123" /></td>
					</tr>
					<tr>
						<td height="88"><img class="table_image" id="11"
							src='images/<%=names[11]%>' width="123" height="123" /></td>
						<td><img class="table_image" id="12"
							src='images/<%=names[12]%>' width="123" height="123" /></td>
						<td><img class="table_image" id="13"
							src='images/<%=names[13]%>' width="123" height="123" /></td>
						<td><img class="table_image" id="14"
							src='images/<%=names[14]%>' width="123" height="123" /></td>
					</tr>
					<tr>
						<td height="290"><img class="table_image" id="15"
							src='images/<%=names[15]%>' width="123" height="123" /></td>
						<td colspan="4">
							<div align="right" id="bar">
								<img src="images/bar.png" width="402" height="232" />
							</div>
						</td>
					</tr>
				</table>
			</div>

			<div class="clear"></div>
	

	</div>
	<div class="clear"></div>

	<div id="footer">
		&copy; K&G Restaurant | all Rights Reserved by CSE 333 <span class="credit">
		<a href="http://www.weibo.com/gaotaojie/profile?topnav=1&wvr=4">Taojie
				Gao's Paradise</a> by Taojie Gao</span>

	</div>
</body>
</html>